<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list clearfix">
					<div class="button-wrapper">
						<div class="button">{{this.currentCity}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list clearfix">
					<div 
						class="button-wrapper" 
						v-for="item of hot" 
						:key="item.id"
						@click="handleCityClick(item.name)"
					>
						<div class="button">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div 
				class="area" 
				v-for="(item,key) of cities" 
				:key="key"
				:ref="key"
				>
				<div class="title border-topbottom">{{key}}</div>
				<div class="item-list" >
					<div 
						class="item border-bottom" 
						v-for="innerItem of item" 
						:key="innerItem.id"
						@click="handleCityClick(innerItem.name)"
						>
						{{innerItem.name}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState,mapMutations } from 'vuex'
export default {
	name: "CityList",
	props: {
		hot: Array,
		cities: Object,
		letter: String
	},
	computed: {
		...mapState({
			currentCity: 'city'
		})
	},
	methods: {
		handleCityClick (city) {
			this.changeCity(city)
			this.$router.push('/')
		},
		...mapMutations(['changeCity'])
	},
	mounted: function(){
		this.scroll = new BScroll(this.$refs.wrapper,{click:true})
	},
	watch: {
		letter () {
			if(this.letter){
				const element = this.$refs[this.letter][0]
				this.scroll.scrollToElement(element)
			}
		}
	}
}
</script>

<style lang="stylus" scoped>
  .border-topbottom,.border-bottom
    &:before
      border-color: #ccc
    &:after
      border-color: #ccc
.list
  position: absolute
  top: .74rem
  left: 0
  right: 0
  bottom: 0
  overflow: hidden
  .title
    line-height: .24rem
    background: #eee
    padding-left: .1rem
    color: #666
  .button-list
    padding: .04rem .2rem .04rem .04rem
    .button-wrapper
      float: left
      width: 33.33%
      .button
        margin: .04rem
        text-align: center
        border: .01rem solid #ccc
        padding: .04rem 0
        border-radius: .02rem
  .item-list
  	.item
  		line-height: .28rem
  		color: #666
  		padding-left: .08rem
</style>
